<template>
  <div class="warp">
    <div class="header continer">
      <i class="iconfont icon-zuojiantou" @click="Back"></i>
      <h4>{{ title }}</h4>
      <span @click="Save">保存</span>
    </div>
    <div class="main continer">
      <form>
        <div class="line">
          <span>所在城市：</span>
          <input type="text" ref="city" class="city" v-model="formData.city" />
        </div>
        <div class="line">
          <span>小区/大厦/学校：</span>
          <input type="text" ref="area" class="area" v-model="formData.area" />
        </div>
        <div class="line">
          <span>楼号-门牌号：</span>
          <input
            type="text"
            ref="house"
            class="house"
            v-model="formData.house"
          />
        </div>
        <div class="line">
          <span>收货人：</span>
          <input
            type="text"
            ref="username"
            class="username"
            v-model="formData.username"
          />
        </div>
        <div class="line">
          <span>联系电话：</span>
          <input
            type="text"
            ref="phone"
            class="phone"
            v-model="formData.phone"
          />
        </div>
      </form>
    </div>
    <toast v-if="show" :message="toastMessage"></toast>
  </div>
</template>
<script>
import Toast from "../../components/Toast.vue";
export default {
  components: { Toast },
  data() {
    return {
      
      show: false,
      toastMessage: "",
      title: "新增收货地址",
      id: 0,
     
      formData: {
        city: "",
        area: "",
        house: "",
        username: "",
        phone: "",
        id: 0,
      },
    };
  },
  created() {
    let id = this.$route.query.id;
   
    if (id > 0) {
      this.title = "编辑收货地址";
      this.id = id;
      let list = this.$store.state.address.AddressList;
      if (list.length > 0) {
        var index = list.findIndex((item, index) => {
          return item.id == id;
        });
        if (index > -1) this.formData = list[index];
        else {
          this.title = "添加收货地址";
          this.id = 0;
        }
      }
    }
  },
  methods: {
    Back() {
      this.$router.go(-1);
    },
    //保存
    Save() {
      if (!this.formData.city) {
        this.$refs.city.focus();
        return this.showToast("所在城市不能为空!");
      }
      if (!this.formData.area) {
        this.$refs.area.focus();
        return this.showToast("请填写小区/大厦/信息!");
      }
      if (!this.formData.house) {
        this.$refs.house.focus();
        return this.showToast("请填写楼号信息!");
      }
      if (!this.formData.username) {
        this.$refs.username.focus();
        return this.showToast("请填写收货人信息!");
      }
      if (!this.formData.phone) {
        this.$refs.phone.focus();
        return this.showToast("请填写联系电话!");
      }
      //验证通过后保存数据
      this.$store.commit("address/changeAddressInfo", {
        formData: this.formData,
      });
      this.showToast("保存成功!");
      
      setTimeout(() => {
        this.$router.go(-1);
        //that.$router.push({ name: "Address" });
      }, 1000);
    },

    //显示弹层信息
    showToast(message) {
      this.show = true;
      this.toastMessage = message;
      setTimeout(() => {
        this.show = false;
        this.toastMessage = "";
      }, 2000);
    },
  },
};
</script>
<style lang="scss" scoped>
body {
  background-color: #f8f8f8;
}
.continer {
  padding: 0 18px;
}
.warp {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #f8f8f8;
  .header {
    background-color: white;
    height: 44px;
    display: flex;
    justify-content: space-between;
    line-height: 44px;
    h4 {
      font-family: PingFangSC-Regular;
      font-size: 16px;
      color: #333333;
    }
    span {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #333333;
      text-align: right;
    }
  }
  .main {
    margin-top: 12px;
    background-color: white;
    form {
      .line {
        height: 44px;
        line-height: 44px;
        border-bottom: 2px solid #f1f1f1;
        span {
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #666666;
        }
        input {
          border: none;
          outline: none;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #151515;
          line-height: 20px;
        }
      }
      .line:last-child {
        border-bottom: none;
      }
    }
  }
}
</style>